<template>
     <div class="body">

        <div id="login_box">
            <h1>欢迎登录蓝色星球</h1>
            <p>请输入您的账户以继续</p>

            <div class="input_box">
                <input type="text" ref="username" v-model="loginForm.username" placeholder="用户名">
            </div>
            <div class="input_box">
            <input type="password"  ref="password" v-model="loginForm.password"  placeholder="密码">
            </div>
            <div class="input-box">
              <div style="display: flex;text-align: center;width: 100%;">
              <input 
                type="text" 
                class="login-code"
                ref="code"
                v-model="loginForm.code"
                placeholder="验证码" 
                @keyup.enter="login"
              >
              <img :src="codeUrl" 
              @click="getCode"
              class="login-codeimg"/>
            </div>
          </div>
            <button @click="login">登录</button><br>
            <button @click="logout">退出</button><br>	
        </div>
     </div>
</template>

<script>
import { login,getCodeImg } from '../utils/login.js';
export default{
    data(){
        return {
           codeUrl:"",
           loginForm:{
            username:'admin',
            password:"admin123",
            code:"",
            uuid:""
           },
           loading:false,
           captchaEnabled:true,//验证码开关
        }
    },
    mounted(){// 页面加载时自动获取验证码
        this.getCode();
    },
    methods:{
      login() {//登录过程
				this.loading = true;//登录按钮是否可以点击
				//传入用户名，密码，验证码，uuid（后端需要）
				login(this.loginForm.username, this.loginForm.password, this.loginForm.code, this.loginForm.uuid).then(
					res => { 
						console.log("完整响应数据:", res); // 打印完整响应，查看数据结构
						// 检查后端返回的错误码
						if (res.code && res.code !== 200) {
							console.error('登录失败:', res.msg || res.message);
							alert(res.msg || res.message || '登录失败');
							this.loading = false;
							// 登录失败后清空验证码并刷新
							this.loginForm.code = '';
							this.getCode();
							return;
						}
						
						// 尝试多种可能的token路径
						const token = res.token || res.data?.token || res.data?.tokenValue;
						console.log("token值:", token);
						
						if (token) {
							sessionStorage.setItem("token", token); //存入token到sessionStorage中
							sessionStorage.setItem("isLogin", "true"); //存入登录状态到sessionStorage中
							sessionStorage.setItem("loginName", this.loginForm.username); //存入用户名到sessionStorage中
							this.$store.commit('login', this.loginForm.username); //存入用户名到vuex中
							this.$router.push('karry'); //跳转到名人动态页面
						} else {
							console.error('未找到token，响应结构:', res);
							alert('登录失败：未获取到token');
						}
						this.loading = false; // 重置加载状态
					}).catch(error => {//(bug有问题)
						this.loading = false; // 重置加载状态
						console.error('登录失败:', error);
						alert('登录失败，请检查用户名、密码和验证码');
						// 登录失败后清空验证码并刷新
						this.loginForm.code = '';
						this.getCode();
					})				
			},
        logout(){//登出
          sessionStorage.removeItem("token");
          sessionStorage.removeItem("isLogin");
          sessionStorage.removeItem("loginName");
            // 使用Vuex action进行登出
          this.$store.dispatch('logout');
            alert('退出登录成功');
        },
        getCode(){//获取验证码并绑定到img控件上
          getCodeImg().then(res=>{
            this.captchaEnabled=res.captchaEnabled===undefined?true:res.captchaEnabled;
            if(this.captchaEnabled){
              this.codeUrl="data:image/gif;base64,"+res.img;
              this.loginForm.uuid=res.uuid;
            }
          }).catch(error=>{
            console.error('获取验证码失败:', error);
            // 如果获取验证码失败，可以设置一个默认提示
            this.codeUrl = '';
          })
        }
    }
}

</script>
<style scoped>
  .body {
    background-color: #e0f7ff; /* 浅蓝色背景 */
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0;
    font-family: 'Arial', sans-serif;
  }

  .login-code {
		width: 35%;
		height: 30px;
		margin-left: 50px;
	}

	.login-codeimg {
		cursor: pointer;
		/* vertical-align: middle; */
		width: 24%;
		height: 30px;
		margin-top: 20px;
		float: right;
	}
  
  #login_box {
    background-color: white;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
    text-align: center;
  }

  h1 {
    color: #0056b3; /* 主要颜色：蓝色 */
    margin-bottom: 20px;
  }

  p {
    color: #555;
    margin-bottom: 20px;
  }

  input[type="text"],
  input[type="password"] {
    width: 80%;
    padding: 10px;
    margin-top: 10px;
    margin-bottom: 20px;
    border: 1px solid #ddd;
    border-radius: 5px;
  }

  button {
    background-color: #0056b3; /* 主要颜色：蓝色 */
    color: white;
    border: none;
    padding: 10px 20px;
    margin: 10px 0;
    border-radius: 5px;
    cursor: pointer;
  }

  button:hover {
    background-color: #004494; /* 更深一点的蓝色用于悬停效果 */
  }
</style>